import React, {PureComponent} from 'react';
import {
	Image,
	StyleSheet, Text,
	View
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'

/**
 * @FileName: CTabBarNavigator
 * @Author: mazaiting
 * @Date: 2018/6/11
 * @Description:
 *  https://github.com/expo/react-native-tab-navigator
 *  安装：npm install react-native-tab-navigator --save
 */
class CTabBarNavigator extends PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			selectedIndex: 0
		}
	}
	
	render() {
		return (
			<View style={styles.container}>
				{/*头部*/}
				<View>
					<Text>Tab选项卡的切换</Text>
				</View>
				{/*选项卡*/}
				<TabNavigator>
					<TabNavigator.Item
						// 设置名称
						title="消息"
						// 设置是否选中
						selected={0 === this.state.selectedIndex}
						// 设置图标
						renderIcon={() => <Image source={{uri: 'danjianbao'}} style={styles.iconStyle}/>}
						// 设置点击事件
						onPress={() => this.setState({selectedIndex: 0})}
					>
						<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
							<Text>消息</Text>
						</View>
					</TabNavigator.Item>
					<TabNavigator.Item
						// 设置名称
						title="联系人"
						// 设置是否选中
						selected={1 === this.state.selectedIndex}
						// 设置图标
						renderIcon={() => <Image source={{uri: 'qianbao'}} style={styles.iconStyle}/>}
						// 设置点击事件
						onPress={() => this.setState({selectedIndex: 1})}
					>
						<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
							<Text>联系人</Text>
						</View>
					</TabNavigator.Item>
					<TabNavigator.Item
						// 设置名称
						title="动态"
						// 设置是否选中
						selected={2 === this.state.selectedIndex}
						// 设置图标
						renderIcon={() => <Image source={{uri: 'shoutibao'}} style={styles.iconStyle}/>}
						// 设置点击事件
						onPress={() => this.setState({selectedIndex: 2})}
					>
						<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
							<Text>动态</Text>
						</View>
					</TabNavigator.Item>
				</TabNavigator>
			</View>
		)
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#DDD'
	},
	iconStyle: {
		width: 30,
		height: 30
	}
});

/**
 * 导出当前Module
 */
module.exports = CTabBarNavigator;